内容概述
本系列 “vue项目中使用bpmn-xxxx” 分为七篇,均为自己使用过程中用到的实例,手工原创,目前陆续更新中。主要包括vue项目中bpmn使用实例、应用技巧、基本知识点总结和需要注意事项,具有一定的参考价值,需要的朋友可以参考一下。如果转载或通过爬虫直接爬的,格式特别丑,请来原创看:我是作者原文
前情提要
上文已经实现了节点操作的前进、后退、导入。导出等操作,今日来实现“流程图预览”,以及视图的放大缩小,效果如下:
![](https://img2020.cnblogs.com/blog/1312572/202005/1312572-20200512105453110-1279608822.png)
前提:项目安装过bpmn,安装可见上篇文章
实现要点
bpmn提供了两个神器:Modeler 和 Viewer,Modeler带有左侧节点栏和右侧属性栏,点击节点可进行相应操作,Viewer是“查看”,不能更改节点,两者相互独立,可按实际需求按需引入
绘制流程图:import BpmnModeler from 'bpmn-js/lib/Modeler';
预览流程图:import BpmnViewer from 'bpmn-js/lib/Viewer';
直接上代码:
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
预览
放大
缩小
import jquery from 'jquery';
import BpmnViewer from 'bpmn-js/lib/Viewer';
export default {
data() {
return {
containerEl: null,
bpmnModeler: null,
scale: 1,
// 此变量为预览的xml文件数据,由于行数过多,附在了附件中,使用时,将附件整个复值到currentCanvasXml即可
currentCanvasXml: ''
};
},
methods: {
handleZoom(flag) {
if (flag < 0 && this.scale {
this.bpmnModeler.get('canvas').zoom('fit-viewport');
});
},
previewTemp() {
this.containerEl = document.getElementById('container');
// 避免缓存,每次清一下
this.bpmnModeler && this.bpmnModeler.destroy();
this.scale = 1;
this.bpmnModeler = new BpmnViewer({container: this.containerEl});
const viewer = this.bpmnModeler;
this.bpmnModeler.importXML(this.currentCanvasXml, (err) => {
if (err) {
console.error(err);
} else {
// 只实现预览,核心代码以下两句足够
const canvas = viewer.get('canvas');
canvas.zoom('fit-viewport');
// 以下代码为:为节点注册鼠标悬浮事件
const eventBus = this.bpmnModeler.get('eventBus');
const overlays = this.bpmnModeler.get('overlays');
eventBus.on('element.hover', (e) => {
const $overlayHtml = jquery(`
你好,我是悬浮框里的内容
`);
overlays.add(e.element.id, {
position: {top: e.element.height, left: 0},
html: $overlayHtml
});
});
eventBus.on('element.out', () => {
overlays.clear();
});
// 注册悬浮事件结束
}
});
}
}
};
.container {
.tipBox {
width: 200px;
background: #fff;
border-radius: 4px;
border: 1px solid #ebeef5;
padding: 12px;
}
}
View Code
后续
currentCanvasXml 为预览的xml文件数据,由于行数过多,附在了附件中(点我!点我!),使用时,将整个赋值到currentCanvasXml,代码才可以运行,否则报错!!
想获取完整源码或有问题,欢迎大家关注我的公粽号,扫下面二维码或微信搜“前端便利贴”,即可获取~
可爱的你可能还需要
vue项目中使用bpmn-番外篇(留言问题总结)
vue项目中使用bpmn-流程图json属性转xml(七篇更新完成)
vue项目中使用bpmn-流程图xml文件中节点属性转json结构
vue项目中使用bpmn-自定义platter
vue项目中使用bpmn-节点添加颜色
vue项目中使用bpmn-节点篇(为节点添加点击事件、根据id找节点实例、更新节点名字、获取指定类型的所有节点)
vue项目中使用bpmn-基础篇
|